<template>
  <div>
    <el-dialog class="dialog" show-close :visible.sync="visible" width="50%" top="4%">
      <div style="margin-top: -40px;">
      <el-tabs v-model="activeName" class="el-tabs-daohang" v-show="activeInto">
        <el-tab-pane :label="dialogType+'文章'" name="first"></el-tab-pane>
        <el-tab-pane label=" 设置 " name="second"></el-tab-pane>
      </el-tabs>
      <el-tabs v-model="typeManager" class="el-tabs-daohang1" v-show="!activeInto">
        <!-- <el-tab-pane label="<" name="0" disabled style="font-size: 20px;"></el-tab-pane> -->
        <el-tab-pane class="type_manager" label="管理分类" name="1" disabled></el-tab-pane>
      </el-tabs>
      <div class="el-icon-arrow-left back" v-show="!activeInto" @click="activeInto=true;activeName='second'"></div>
    </div>
    <div class="dialog_content">
      <keep-alive>
        <component :form="form" :is="currentTabComponent" @toEditor="$emit('toEditor');" @activeInto="activeInto=false;activeName='third'"></component>
      </keep-alive>
    </div>
    <span slot="footer" class="dialog_footer" v-show="footerShow">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="$emit('submit');">确 定</el-button>
    </span>
  </el-dialog>
  </div>
</template>
<script>
import AddArticle from './AddArticle.vue';
import ArticleSetting from './ArticleSetting.vue';
import TypeManager from './TypeManager.vue';
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    form: {
      type: Object,
      default: {}
    },
    dialogType:{
      type: String,
      default: '添加'
    }
  },
  components: {
    AddArticle,
    ArticleSetting,
    TypeManager
  },
  data() {
    return {
      visible:this.dialogVisible,
      activeName: 'first',
      activeInto: true,
      typeManager:' x',
      footerShow:true,
    }
  },
  methods: {
  },
  mounted(){},
  computed: {
    // 计算属性，根据当前激活的标签页返回对应的组件名称
    currentTabComponent() {
      switch (this.activeName) {
        case 'first':
          return 'AddArticle';
        case 'second':
          return 'ArticleSetting';
        case 'third':
          return 'TypeManager';
        default:
          return 'AddArticle'; // 默认组件
      }
    },
  },
  watch:{
	  dialogVisible(val, valOld){
		  this.visible = val;
	  },
    visible(val, valOld){
      this.$emit('update:dialogVisible', val);
    },
    activeName(val, valOld){
      this.footerShow = val!=='third';
    }
	}
}
</script>
<style scoped>
.el-tabs-daohang /deep/.el-tabs__item,.el-tabs-daohang1 /deep/.el-tabs__item{
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0px;
  line-height: 25.2px;
  text-align: left;
  vertical-align: top;
  margin-top: 10px;
}
.el-tabs-daohang1 /deep/ .el-tabs__item{
  color: #7E72F2;
  margin-left: 50px;
}
.dialog {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-y:hidden;
  font-size: 16px;
}
.dialog /deep/.el-dialog__header{
  height: 10px;
}
.dialog /deep/.el-tabs__item.is-active,
.dialog /deep/.el-tabs__item:hover,
.dialog /deep/.el-dialog__close:hover{color: #7e72f2;}
.dialog /deep/.el-tabs__active-bar{background-color: #7e72f2;}
.dialog /deep/ .el-dialog{
  border-radius: 20px;
}
.dialog_footer .el-button{
  border-radius: 10px;
}
.dialog_content{
  height: 450px;
  flex:1;/*使内容区域填充剩余空间 */
  overflow-y:auto;/*当内容超出时显示滚动条*/
  scrollbar-width:thin;
}
.el-button--primary{
    background-color: rgb(126, 114, 242);
    border-color: #7E72F2;
}
.el-button--primary:hover{
    background-color: rgba(126, 114, 242, 0.5);
}
.back{
  position: absolute;
  left: 20px;
  top: 40px;
  font-weight: 700;
  font-size: 25px;
  cursor: pointer;
  color: rgb(235, 238, 242);
  z-index: 99;
}
.back:hover{
  color: #7f72f29a;
}
.back:active{
  color: #7f72f2c1;
}
</style>